import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';
import 'package:meal/constant/fonts.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/ui/draw_under_line.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 活动报名记录
///
class MarketActivityRecord extends StatefulWidget {
  const MarketActivityRecord({Key? key}) : super(key: key);

  @override
  State<MarketActivityRecord> createState() => _MarketActivityRecordState();
}

class _MarketActivityRecordState extends State<MarketActivityRecord> {
  late ScrollController scrollController;

  bool isLoading = false;

  bool noMore = false;

  TextStyle get titleStyle {
    return StylesUtils.customTextStyle(
        fontSize: Sizes.default16, color: ColorsUtils.color333, fontWeight: Fonts.w7);
  }

  TextStyle get subStyle {
    return StylesUtils.customTextStyle(fontSize: Sizes.default16, color: ColorsUtils.color333);
  }

  TextStyle get defaultStyle {
    return StylesUtils.customTextStyle(fontSize: Sizes.default12, color: ColorsUtils.color333);
  }

  TextStyle get style {
    return StylesUtils.customTextStyle(fontSize: Sizes.default12, color: ColorsUtils.color797);
  }

  Future<void> onRefresh() {
    return Future.delayed(const Duration(seconds: 1), () {
      Fluttertoast.showToast(msg: '当前已是最新数据', gravity: ToastGravity.TOP);
    });
  }

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController()
      ..addListener(() {
        if (!isLoading &&
            !noMore &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          setState(() {
            isLoading = true;
            loadMoreData();
          });
        }
      });
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('报名记录'),
      body: RefreshIndicator(
        onRefresh: onRefresh,
        child: ListView(
          controller: scrollController,
          shrinkWrap: true,
          children: [
            Container(
              margin: const EdgeInsets.all(Sizes.default20),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: Column(
                children: [
                  DrawUnderLine(
                      child: Container(
                    padding: const EdgeInsets.only(
                        bottom: Sizes.default20, left: Sizes.default15, right: Sizes.default15),
                    child: Column(
                      children: [
                        SizedBox(
                          height: Sizes.default50,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '满500P减50P',
                                style: titleStyle,
                              ),
                              Text(
                                '报名成功',
                                style: subStyle,
                              )
                            ],
                          ),
                        ),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '流水编号：12232964103521',
                              style: defaultStyle,
                            )),
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: const EdgeInsets.symmetric(vertical: Sizes.default10),
                          child: Text(
                            '报名时间：2023-02-15 12:13:14',
                            style: defaultStyle,
                          ),
                        ),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '成功时间：2023-02-15 12:12:14',
                                  style: defaultStyle,
                                ),
                                Text.rich(TextSpan(
                                    text: '费用',
                                    style: defaultStyle,
                                    children: [TextSpan(text: '￥0.00', style: titleStyle)]))
                              ],
                            )),
                      ],
                    ),
                  )),
                  InkWell(
                    onTap: () {
                      Get.toNamed(RouteGet.marketActivityInfo, arguments: true);
                    },
                    child: Container(
                      height: Sizes.default50,
                      padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '查看详情',
                            style: style,
                          ),
                          ToolsUtils.iconRightArrow(Sizes.default14, Sizes.default14)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(
                  left: Sizes.default20, right: Sizes.default20, bottom: Sizes.default20),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: Column(
                children: [
                  DrawUnderLine(
                    child: Container(
                      padding: const EdgeInsets.only(
                          bottom: Sizes.default20, left: Sizes.default15, right: Sizes.default15),
                      child: Column(
                        children: [
                          SizedBox(
                            height: Sizes.default50,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '五折钜惠商家',
                                  style: titleStyle,
                                ),
                                Text(
                                  '待付款',
                                  style: subStyle,
                                )
                              ],
                            ),
                          ),
                          Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '流水编号：12232964103521',
                                style: defaultStyle,
                              )),
                          Container(
                              alignment: Alignment.centerLeft,
                              margin: const EdgeInsets.symmetric(vertical: Sizes.default10),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '报名时间：2023-02-15 12:12:14',
                                    style: defaultStyle,
                                  ),
                                  Text.rich(TextSpan(
                                      text: '费用',
                                      style: defaultStyle,
                                      children: [TextSpan(text: '￥10.00', style: titleStyle)]))
                                ],
                              )),
                          Container(
                            margin:
                                const EdgeInsets.only(bottom: Sizes.default15, top: Sizes.default5),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      alignment: PlaceholderAlignment.middle,
                                      child: ToolsUtils.getUrlSvg(
                                          'https://cdn7.axureshop.com/demo/1525603/images/报名记录/u4006.svg',
                                          width: Sizes.default13,
                                          height: Sizes.default13)),
                                  TextSpan(
                                      text: '剩余9分钟',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default12, color: '#FF9900'))
                                ])),
                                InkWell(
                                  onTap: () {
                                    Get.toNamed(RouteGet.marketActivityPay);
                                  },
                                  child: Container(
                                    constraints: const BoxConstraints.expand(
                                        width: Sizes.default80, height: Sizes.default30),
                                    decoration: BoxDecoration(
                                        color: ColorsUtils.rgba(255, 255, 255, 1),
                                        borderRadius: BorderRadius.circular(Sizes.default5),
                                        border: Border.all(
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorFf6))),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '去支付',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default13, color: ColorsUtils.colorFf6),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      Get.toNamed(RouteGet.marketActivityInfo, arguments: false);
                    },
                    child: Container(
                      height: Sizes.default50,
                      padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '查看详情',
                            style: style,
                          ),
                          ToolsUtils.iconRightArrow(Sizes.default14, Sizes.default14)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(
                  left: Sizes.default20, right: Sizes.default20, bottom: Sizes.default20),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: Column(
                children: [
                  DrawUnderLine(
                      child: Container(
                    padding: const EdgeInsets.only(
                        bottom: Sizes.default20, left: Sizes.default15, right: Sizes.default15),
                    child: Column(
                      children: [
                        SizedBox(
                          height: Sizes.default50,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '五折钜惠商家',
                                style: titleStyle,
                              ),
                              Text(
                                '报名失败',
                                style: subStyle,
                              )
                            ],
                          ),
                        ),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '流水编号：12232964103521',
                              style: defaultStyle,
                            )),
                        Container(
                            alignment: Alignment.centerLeft,
                            margin: const EdgeInsets.symmetric(vertical: Sizes.default10),
                            child: Text(
                              '报名时间：2023-02-15 12:12:14',
                              style: defaultStyle,
                            )),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '失败时间：2023-02-15 12:13:14',
                                  style: defaultStyle,
                                ),
                                Text.rich(TextSpan(
                                    text: '费用',
                                    style: defaultStyle,
                                    children: [TextSpan(text: '￥0.00', style: titleStyle)]))
                              ],
                            )),
                      ],
                    ),
                  )),
                  InkWell(
                    onTap: () {},
                    child: Container(
                      height: Sizes.default50,
                      padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '查看详情',
                            style: style,
                          ),
                          ToolsUtils.iconRightArrow(Sizes.default14, Sizes.default14)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(
                  left: Sizes.default20, right: Sizes.default20, bottom: Sizes.default20),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: Column(
                children: [
                  DrawUnderLine(
                      child: Container(
                    padding: const EdgeInsets.only(
                        bottom: Sizes.default20, left: Sizes.default15, right: Sizes.default15),
                    child: Column(
                      children: [
                        SizedBox(
                          height: Sizes.default50,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '新店八折特优惠',
                                style: titleStyle,
                              ),
                              Text(
                                '报名成功',
                                style: subStyle,
                              )
                            ],
                          ),
                        ),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '流水编号：12232964103521',
                              style: defaultStyle,
                            )),
                        Container(
                            alignment: Alignment.centerLeft,
                            margin: const EdgeInsets.symmetric(vertical: Sizes.default10),
                            child: Text(
                              '报名时间：2023-02-15 12:12:14',
                              style: defaultStyle,
                            )),
                        Container(
                            alignment: Alignment.centerLeft,
                            margin: const EdgeInsets.only(bottom: Sizes.default10),
                            child: Text(
                              '付款时间：2023-02-15 12:12:32',
                              style: defaultStyle,
                            )),
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '成功时间：2023-02-15 12:13:14',
                                  style: defaultStyle,
                                ),
                                Text.rich(TextSpan(
                                    text: '费用',
                                    style: defaultStyle,
                                    children: [TextSpan(text: '￥0.00', style: titleStyle)]))
                              ],
                            )),
                      ],
                    ),
                  )),
                  InkWell(
                    onTap: () {},
                    child: Container(
                      height: Sizes.default50,
                      padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '查看详情',
                            style: style,
                          ),
                          ToolsUtils.iconRightArrow(Sizes.default14, Sizes.default14)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            renderBottom(),
          ],
        ),
      ),
    );
  }

  Widget renderBottom() {
    if (noMore) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        child: Text(
          '仅展示近12个月的报名记录',
          style:
              StylesUtils.customTextStyle(color: ColorsUtils.color797, fontSize: Sizes.default15),
        ),
      );
    }
    if (isLoading) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '努力加载中...',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default15),
            ),
            const Padding(padding: EdgeInsets.only(left: 10)),
            const SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      );
    } else {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        child: Text(
          '上拉加载更多',
          style:
              StylesUtils.customTextStyle(color: ColorsUtils.color797, fontSize: Sizes.default15),
        ),
      );
    }
  }

  void loadMoreData() {
    Future.delayed(const Duration(seconds: 1), () {
      setState(() {
        noMore = true;
        isLoading = false;
      });
    });
  }
}
